<!--管理员管理-->
<template>
  <div style="background-color: #fff;padding: 10px;margin: 5px auto;width: 85%;align-items: center;display: flex;justify-content: center;">
    <span style="line-height: 50px;font-size: 30px;color: lightseagreen">管理员管理</span>
  </div>
  <!--  管理员账号搜索卡片-->
  <el-card style="margin: 5px auto;height: 70px;width: 88%">
    <el-form :inline="true">
      <el-form-item label="管理员名称">
        <el-input placeholder="请输入" style="width:220px;" v-model="searchFormName.name"
                  @keydown.enter="selectAdmin"></el-input>
      </el-form-item>
      <el-form-item label="管理员状态">
        <el-select placeholder="请选择" style="width:220px;" v-model="searchFormName.status" @change="selectAdmin">
          <el-option value="1" label="启用" ></el-option>
          <el-option value="0" label="禁用" ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="success" @click="selectAdmin" >搜索</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!--    管理员列表-->
  <el-card style="margin: 1px auto;width: 88%;overflow-y:auto;">
    <div style="margin:2px 0px 40px 10px;">
      管理员列表
      <el-button type="success" style="float: right;" @click="addUser" :disabled="adminSuper">新增管理员</el-button>
    </div>
      <el-table :data="adminArr" >
        <el-table-column type="index" label="编号" width="80" align="center"/>
        <el-table-column prop="name" label="管理员名称" align="center"/>
        <el-table-column prop="cardId" label="身份证号" align="center"/>
        <el-table-column prop="password" label="管理员密码" align="center" v-if="!adminSuper"/>
          <el-table-column prop="phone" label="手机号&账号" align="center"/>
          <el-table-column label="用户状态" align="center" >
            <template #default="scope">
              <el-switch active-value="1" inactive-value="0" v-model="scope.row.status" @change="updateStatus(scope.row.id,scope.row.status)"
                         :disabled="adminSuper" ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button link type="primary" size="small"  :disabled="disPassword(scope.row.id)" @click="editPassword(scope.row.id)">重置密码</el-button>
              <el-button link type="primary" size="small" :disabled="adminSuper" @click="deleteAdmin(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>


    <div style="margin:30px;float: right;">
      <!--layout="total(总数), sizes(每页总数), prev(上一页), pager(当前页), next(下一页), jumper(跳转页)"
       :pager-count="4" 表示显示4个页码
       :page-sizes="[5, 10, 15, 20]" 表示一共有几个"每页显示多少条"选项
       current-page当前页码 page-size当前页码的条数 total总条数 这三个变量需要和实际数据双向绑定
       :total="400" 表示总条数，需要双向绑定
       @size-change="handleSizeChange" 表示每页显示多少条改变时触发的事件
       @current-change="handleCurrentChange" 表示当前页码改变时触发的事件 -->
      <el-pagination
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[5, 10, 15, 20]"
          v-model:current-page="currentPage"
          v-model:page-size="currentSize"
          v-model:total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </el-card>

  <!--      保存管理员项弹窗-->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" style="width:1000px;padding:40px;"
             :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-form-item label="管理员名称">
        <el-input placeholder="请输入" v-model="saveUserFrom.name" :disabled="dis"></el-input>
      </el-form-item>
      <el-form-item label="管理员身份证号">
        <el-input placeholder="请输入" v-model="saveUserFrom.cardId" :disabled="dis"></el-input>
      </el-form-item>
      <el-form-item label="管理员密码">
        <el-input placeholder="请输入" v-model="saveUserFrom.password"></el-input>
      </el-form-item>
      <el-form-item label="手机号&账号">
        <el-input placeholder="请输入" v-model="saveUserFrom.phone" :disabled="dis"></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveAdmin" >保存</el-button>
    </template>
  </el-dialog>

</template>
<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {BAR_MAP, ElMessage} from "element-plus";

// 定义变量判断管理员是否为超级管理员
const adminSuper = ref(false);

// 定义对象保存当前登录用户信息
const loginUser = ref();

// 定义方法使除超级管理员外管理员只能修改自己密码
const disPassword = (id)=>{
  if (loginUser.value.superStatus == 6){
    return false;
  }else if (loginUser.value.id == id){
    return false
  }
  return true;
}


//定义变量保存管理员名称
const searchFormName = ref({
  name:'',
  status:''
});
//定义变量保存分页器的当前页数
const currentPage = ref(1);
//定义变量保存分页器的每页显示多少条
const currentSize = ref(5);
//定义变量保存数据总条目数
const total = ref(100);
//修改每页显示多少条，触发此函数
const handleSizeChange = (val) => {
  console.log('每页展示' + val + '条数据');
  selectAdmin();
}
//修改当前页码，触发此函数
const handleCurrentChange = (val) => {
  console.log('当前的页数为：' + val);
  selectAdmin();
}
// 定义数组来保存管理员数据
const adminArr = ref([]);

// 定义方法查询管理员数据
const selectAdmin = ()=>{
  searchFormName.value.pageSize = currentSize.value
  searchFormName.value.pageNum = currentPage.value
  let data = qs.stringify(searchFormName.value)
  axios.get(BASE_URL + '/v1/admin/admin/select?'+data)
      .then((response)=>{
        if (response.data.code == 2000){
          adminArr.value = response.data.data.list;
          total.value = response.data.data.total;
        }else {
          ElMessage.error(response.data.msg)
        }
      })

}
onMounted(()=>{
  selectAdmin();
  loginUser.value = getUser();
  if (loginUser.value.superStatus !=6){
    adminSuper.value = true;
  }
})

// 定义方法重置搜索
const resetSearch = ()=>{
  searchFormName.value = {};
  selectAdmin();
}




//定义变量保存弹窗的标题
const dialogTitle = ref('新增管理员')
// 定义变量控制弹窗是否可见
const dialogVisible = ref(false)
//定义对象用来保存新增管理员数据
const saveUserFrom = ref({
  name:'',
  password:'',
  cardId:'',
  phone:'',
});
// 定义新增管理员弹窗开启方法
const addUser = ()=>{
  dialogVisible.value = true;
  dialogTitle.value = '新增管理员'
  dis.value = false;
}
// 定义取消弹窗的方法
const handleClose = ()=>{
  if (confirm('是否要关闭本弹窗?')) {
    dialogVisible.value = false;
    saveUserFrom.value = {};
  }
}

// 定义保存管理员方法
const saveAdmin = ()=>{
  let data = qs.stringify(saveUserFrom.value);
  axios.post(BASE_URL + '/v1/admin/admin/save',data)
      .then((response)=>{
        if (response.data.code == 2000){
          ElMessage.success('添加管理员成功');
          selectAdmin();
          saveUserFrom.value = {};
          dialogVisible.value = false;
        }else {
          ElMessage.error(response.data.msg);
        }
      })

}

// 设定表示符号使除密码外的所有字段不可选中
const dis = ref(true)

// 定义编辑密码的方法
const editPassword = (id)=>{
  dialogVisible.value = true;
  dialogTitle.value = '修改密码'
  axios.get(BASE_URL + '/v1/admin/admin/select?id='+id)
      .then((response)=>{
        if (response.data.code == 2000){
          saveUserFrom.value = response.data.data.list[0]
        }else {
          ElMessage.error(response.data.msg)
        }
      })
}

// 定义方法用以删除管理员
const deleteAdmin = (id)=>{
  axios.post(BASE_URL + '/v1/admin/admin/delete/'+id)
      .then((response)=>{
        if (response.data.code == 2000){
          ElMessage.success('删除管理员成功');
          selectAdmin();
        }else {
          ElMessage.error(response.data.msg);
        }
      })
}

// 修改管理员状态
const updateStatus = (adminId,status)=>{
  let data = qs.stringify({id:adminId,status:status})
  axios.post(BASE_URL + '/v1/admin/admin/save',data)
      .then((response)=>{
        if (response.data.code == 2000){
          ElMessage.success('修改状态成功');
          selectAdmin();
        }else {
          ElMessage.error((response.data.msg));
        }
      })
}
</script>


<style scoped>

</style>